<template>
  <div class="container">
          <!-- <image src="../../assets/image/getcode.png" alt="" srcset=""/> -->

    <div class="login">
      <div class="section login-title">
        <div class="login-text">登录</div>
        <div class="slog">出险无忧  出行无忧</div>
      </div>

      <div class="section login-container">
        <div class="getphonebox">
          <div div class="form-item phonebox">
            <input type="number" class="phoneinput" @input="isphone"  v-model="form.phone" placeholder="请输入手机号"/>
           
          </div>
          <div class="getphone">
            <button class="text-btn" :disabled="isdisabled" @click="getcode">{{smsCode.verifiytext}}</button>
          </div>
        </div>

        <div class="form-item phonecode">
          <input type="number" placeholder="请输入短信验证码" maxlength="6" pattern="[0-9]*" v-model="form.vcode">
        </div>
        
        <div class="errorText">{{ message }}</div>
        <div class="btn-container btn-top">
          
           <van-button class="btn-large" :loading="btnLoading" @click="subregister">登录</van-button>
          <!-- <van-button v-else class="btn-large">请升级微信版本</van-button> -->
        </div>
        <div class="btn-container">
          <van-button class="btn-large-white" @click="back">取消</van-button>
        </div>
        <div class="agree-text">
          <div class="text">登录即表示同意 <router-link class="red" :to="{path:'/useragreement',query:{id:1}}">《用户服务协议》</router-link> </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options:null,
      isdisabled:true,
      form:{
        phone:"",
        vcode:"",
      },
      userInfo:{},
      btnDisabled:true,
      btnLoading:false,
      message:"",
      smsCode:{
        second:60,
        verifiybtnloading:false,
        verifiytext:"获取验证码",
        verifiybtn:false,
        sending:true
      }
    }
  },
  computed:{
 
  },
  methods: {
    getcode(){
      this.isdisabled=true
      let _this = this;
      let params = {
        mobile:this.form.phone
      }
      this.$post('/registuser/sendPhoneMsg',params).then( res => {
        console.log(res)
        
        if(res.code=="200"){
          let second = 60;
          let result = setInterval(()=>{
            second--
            console.log(second)
            if(second<0){
              clearInterval(result);
              this.smsCode.verifiytext="获取验证码"
              this.isdisabled=false
            }else{
              this.smsCode.verifiytext = second+'秒后重试'
            }
          },1000)
        }
        this.$toast(res.msg)
      })
    },
    isphone(){
      
      if(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form.phone)){
        this.isdisabled=false
      }else{
        this.isdisabled=true
      }
    },
    subregister(){
      let _this =this
      if(this.form.vcode==''){
        this.$toast('请输入验证码')
        return false
      }
      if(this.form.phone==""){
        this.$toast('请输入手机号')
        return false
      }
      let params = {
        code:this.form.vcode,
        mobile:this.form.phone
      }
      this.$post('/registuser/sendPhoneMsg',params).then( res => {
        console.log(res)
        if(res.code=='200'){
          // _this.submitForm()

          _this.getRegisterMap()
          
        }else{
          this.$toast(res.msg)
        }

      })
    },
     getRegisterMap(){
      
      let params = {
        unionid:sessionStorage.getItem('getunionid')
      }
      this.$post('/registuser/queryMap',params).then( res => {
        console.log(res)
        if(res.code="200"){
          sessionStorage.setItem('userinfos',JSON.stringify(res.data))
          // console.log(sessionStorage.getItem('userinfos'))
          this.userInfo = res.data
          if(res.data){
            this.$router.push("/");
          }else{
            this.submitForm()
          }
        }
        // this.$toast(res.msg)
      })
    },
    submitForm(){
      let isuserinfo = JSON.parse(sessionStorage.getItem('isuserinfo')) 
      let params = {
        phone:this.form.phone,
        unionid:isuserinfo.unionid,
        nickname:isuserinfo.nickname,
        headimgurl:isuserinfo.headimgurl
      };
      this.$post('/registuser/insert',params).then( res => {
        // console.log(res)
        if(res.code="200"){
          // this.getRegisterMap();
          this.$router.push("/");
        }

        // this.$toast(res.msg)
      })
    },
   
    back(){
      this.$router.push("/");
    },

    
  }
}
</script>

<style lang="scss" scoped>

  .container{
    width: 100%;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
  }
  .login{
    width:100%;
    background-color:white;
    .section{
      &.login-title{
        margin-left:20px;
        margin-top:60px;
        font-size: 16px;
        .login-text{
          width:60px;
          height:auto;
          font-size:30px;
          line-height: 30px;
          color: #333333;
          font-weight:400;
          overflow:hidden;
          padding-bottom: 6px;
          border-bottom: 4px solid #a92828;
          margin-bottom: 15px;
        }
        
      }
      
    }
    .login-container{
      margin-top: 30px;
      padding: 20px;
    }
    .getphonebox{
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
    }
    .phonebox{
      display: inline-block;
      width: 50%;
      input{
        width: 100%;
        font-size: 16px;
        border: none;
        padding: 5px 15px;
      }
    }
    .getphone{
      width: 100px;
      display: inline-block;
      float: right;
      .text-btn{
        color: #ad2f2f;
        border: none;
        background: #fff;
        font-size: 16px;
      }
    }
    .phonecode{
      padding-top: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      input{
        border: none;
        font-size: 16px;
        padding: 5px 15px;
      }
    }
    .btn-top{
      margin-top: 40px;
    }
    .btn-container{
      margin-bottom: 15px;
      button{
        width: 100%;
        background: #ad2f2f;
        color: #fff;
        border-radius: 50px;
      }
      .btn-large-white{
        background: #fff;
        color: #ad2f2f;
      }
    }
    .agree-text{
      font-size: 16px;
      margin-top: 20px;
      .red{
        color: #ad2f2f;
      }
    }
  }
  
</style>
